<template>
  <div class=''>
    <h2>this is player</h2>
    <img src="../assets/logo.png" /><br>
    <audio controls="controls" ref="player" autoplay="autoplay">
      <source :src="currentSong" />
    </audio>
    <h2>当前播放：{{songList[currentIndex]}}</h2>
    <div class="button-class">
      <button  @click="prev()">上一首</button>
      <button @click="next()">下一首</button>
      <button @click="isPlay = !isPlay">播放/暂停</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'player',
    data() {
      return {
        baseUrl: process.env.BASE_URL + "songs/",
        songList:["像我这样的人.mp3", "十年.mp3"],
        isPlay: false,
        currentIndex: 0,
        currentSong: "",
      }
    },
    created() {
      this.currentSong = this.baseUrl + this.songList[this.currentIndex];
    },
    watch: {
      isPlay() {
        this.togglePlay();
      }
    },
    methods: {
      togglePlay() {
        let player = this.$refs.player;
        if(this.isPlay) {
          player.pause();
        } else {
          player.play();
        }
        this.logger();
      },
      prev() {  
        if(this.currentIndex == 0) {
          this.currentIndex = this.songList.length-1;
        } else {
          this.currentIndex = this.currentIndex - 1;
        }
        this.currentSong = this.baseUrl + this.songList[this.currentIndex];
        this.$refs.player.load();
      },
      next() {
        if(this.currentIndex == this.songList.length-1) {
          this.currentIndex = 0;
        } else {
          this.currentIndex = this.currentIndex + 1;
        }
        this.currentSong = this.baseUrl + this.songList[this.currentIndex];
        this.$refs.player.load();
      },
      logger() {
        console.log("isPlay=>" + this.isPlay);
        console.log("currentIndex=>" + this.currentIndex);
        console.log("currentSong=>" + this.currentSong);
      }
    },
  }
</script>

<style scoped>

</style>